<template>
  <el-dialog
    width="80%"
    @open="handleOpen"
    @close="handleClose"
    title="详情"
    :visible="dialogVisible"
  >
    <el-form
      :model="postData"
      ref="postForm"
      label-width="120px"
      label-position="left"
    >
      <h1>租房合同</h1>
      <el-row v-if="user && owner">
        <el-col :span="6">
          <el-form-item label="甲方">
            <el-image
              style="height: 80px;width: 80px"
              :src="user.userInfo.picture || require('@/common/img/null.jpg')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="甲方用户名">
            {{ user.userInfo.firstName + user.userInfo.lastName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乙方">
            <el-image
              style="height: 80px;width: 80px"
              :src="owner.userInfo.picture || require('@/common/img/null.jpg')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乙方用户名">
            {{ owner.userInfo.firstName + owner.userInfo.lastName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附加信息" prop="content">
            {{ postData.content }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="ask">
        <el-col :span="6">
          <el-form-item label="开始时间">
            {{ ask.startTime | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间">
            {{ ask.endTime | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="约定租金">
            {{ ask.rent }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="甲方">
            {{ postData.status | oneStatusFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方">
            {{ postData.status | twoStatusFilter }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否生效">
            {{ postData.status | threeStatusFilter }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="agree" v-if="postData.status === '2'"
        >同 意
      </el-button>
      <el-button type="primary" @click="disagree" v-if="postData.status === '2'"
        >不同意
      </el-button>
      <el-button
        type="primary"
        v-if="
          postData.status === '6' &&
            Date.parse(postData.ask.endTime) < Date.now()
        "
        @click="destory"
        >毁 约
      </el-button>
      <el-button
        type="primary"
        v-if="
          postData.status === '6' &&
            Date.parse(postData.ask.endTime) > Date.now()
        "
        @click="parse"
        >续 约
      </el-button>
      <el-button
        type="primary"
        v-if="
          postData.status === '6' &&
            Date.parse(postData.ask.endTime) > Date.now()
        "
        @click="noParse"
        >不续约
      </el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
    <el-dialog append-to-body title="续约" :visible.sync="visible">
      <el-date-picker
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        type="daterange"
        v-model="postData.times"
      />
      <div slot="footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import postDialog from "../../../mixins/postDialog";

export default {
  name: "postDialog",
  mixins: [postDialog],
  data() {
    return {
      postData: {
        content: "",
        status: "",
        ask: {},
        times: []
      },
      editUrl: "/api/lease/lease/status",
      getDetailUrl: "/api/lease/lease",
      visible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < new Date().setHours(23, 59, 59);
        }
      }
    };
  },
  methods: {
    agree() {
      this.postData.status = "6";
      this.submit();
    },
    disagree() {
      this.postData.status = "3";
      this.submit();
    },
    async destory() {
      this.postData.status = "4";
      this.editUrl = "/api/lease/lease/status";
      await this.submit();
      this.editUrl = "/api/lease/lease";
    },
    async noParse() {
      this.postData.status = "7";
      this.editUrl = "/api/lease/lease/status";
      await this.submit();
      this.editUrl = "/api/lease/lease";
    },
    async parse() {
      this.visible = true;
    },
    async confirm() {
      if (this.postData.times.length === 0) {
        this.$message({ type: "success", message: "请填写时间" });
        return;
      }
      this.postData.status = "6";
      this.editUrl = "/api/lease/lease/status";
      await this.submit();
      this.visible = false;
      this.editUrl = "/api/lease/lease";
    }
  },
  computed: {
    user() {
      return this.postData?.ask?.user;
    },
    house() {
      return this.postData?.ask?.house;
    },
    owner() {
      return this.postData?.ask?.house?.user;
    },
    ask() {
      return this.postData?.ask;
    }
  }
};
</script>

<style scoped></style>
